<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书城首页</title>
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/iconfont.css" />
    <link rel="stylesheet" href="static/css/index.css" />
    <link rel="stylesheet" href="static/css/swiper.min.css" />
    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
    <!--    引入jquery-->
    <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>


  </head>
  <body>
  <!--  jquery 异步翻页  -->
  <script>
    function load(currentPage) {
      //发送ajax请求
      $.get("http://localhost:8080/bookstore/bookManager", {
        pageNo: currentPage,
        method: 'pageQuery'
      }, function (pb) {
        //解析Pagebean数据，展示到页面上
        //分页工具条数据展示
        //1.1展示总页码
        $("#totalPage").html(pb.pageTotal);
        //$("#currentPage").html(pb.pageNo);
        $("#bookCount").html(pb.itemsCount);
        $("#pageNoInput").attr("value",pb.pageNo);
        $("#minPrice").attr("value","");
        $("#maxPrice").attr("value","");
        var spans = "";
        //计算上一页的页码
        var beforeNum = pb.pageNo - 1;
        if (beforeNum <= 0) {
          beforeNum = 1;
        }
        //首页
        var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>';
        spans += first;
        //上一页
        var pre = '<span οnclick="javascript:load('+beforeNum+')"><a href="javascript:load('+beforeNum+'); void(0);">上一页</a></span>';
        spans += pre;
        //1.2展示分页页码
        /*
        一共展示10个页码，能够达到前5后4的效果
        如果前面不够5个，后面补齐总数到10个
        如果后面不足4个，前边补齐总数到10个
        */
        //定义开始位置 begin，结束位置 end
        var begin;
        var end;
        //要显示10个页码
        if (pb.pageTotal < 10) {
          //如果总页码都没有10页，就显示全部
          begin = 1;
          end = pb.pageTotal;
        } else {
          //总页码超过10页
          begin = pb.pageNo - 5;
          end = pb.pageNo + 4;
          //如果前边不够5个，后边补齐10个
          if (begin < 1) {
            begin = 1;
            end = begin + 9;
          }
          //如果后边不足4个，前面补齐10个
          if (end > pb.pageTotal) {
            end = pb.pageTotal;
            begin = end - 9;
          }
        }
        for (var i = begin; i <= end; i++) {
          var span;
          //判断当前页码是否等于i
          //创建不同格式的页码li
          if (pb.pageNo == i) {
            span = ' <a href="javascript:load('+i+'); void(0);" class="active" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
          } else {
            span = ' <a href="javascript:load('+i+'); void(0);" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
          }
          spans += span;
        }
        var nextPage = pb.pageNo + 1;
        if (nextPage > pb.pageTotal) {
          nextPage = pb.pageTotal;
        }
        var next = ' <span οnclick="javascript:load('+nextPage+')" ><a href="javascript:load('+nextPage+'); void(0);">下一页</a></span>';
        var last = ' <span οnclick="javascript:load('+pb.pageTotal+')"><a href="javascript:load('+pb.pageTotal+'); void(0);">  末页</a></span>';
        spans += next;
        spans += last;
        $("#pageNum").html(spans);
        //列表数据展示
        var book_ps = "";
        for (var i = 0; i < pb.pageItems.length; i++) {
          var book = pb.pageItems[i];
          var p ='<div class="list-item">' +
                  '<img src='+book.imgPath+' alt="" >\n'  +
                  '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                  '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                  '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                  '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                  '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                  '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                  '</div>'
          book_ps += p;
        }
        $(".list-content").html(book_ps);

      });
    };
    //首次刷新页面
    load(1);
  </script>
  <div id="app">
    <div class="topbar">
      <div class="w">
        <div class="topbar-left">
          <i>送至:</i>
          <i>北京</i>
          <i class="iconfont icon-ai-arrow-down"></i>
        </div>


        <!--登录前的⻛格-->
        <div class="topbar-right" th:if="${session.loginUser == null && session.registerUser == null}">
          <a href="user?method=toLoginPage" class="login">登录</a>
          <a href="user?method=toRegisterPage" class="register">注册</a>
          <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋
            <div class="cart-num" v-text="totalCount">3</div>
          </a>
          <a href="protected/admin?method=toManagerPage" class="admin">后台管理</a>
        </div>
        <!--登录前的⻛格-->
        <!--登录后⻛格-->
        <div class="topbar-right" th:if="${session.loginUser != null}">
          <span>欢迎你<b th:text="${session.loginUser.userName}">Drimwai</b></span>
          <a href="user?method=logout" class="register">注销</a>
          <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋
            <div class="cart-num" v-text="totalCount">3</div>
          </a>
          <a href="protected/admin?method=toManagerPage" class="admin">后台管理</a> </div>
        <!--登录后⻛格-->
        <!--          &lt;!&ndash;注册成功后⻛格&ndash;&gt;-->
        <!--          <div class="topbar-right" th:if="${session.registerUser != null}">-->
        <!--            <span>欢迎你<b th:text="${session.registerUser.userName}">Drimwai</b></span>-->
        <!--            <a href="user?method=logout" class="register">注销</a>-->
        <!--            <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋-->
        <!--              <div class="cart-num"  v-text="totalCount">3</div>-->
        <!--            </a>-->
        <!--            <a href="protected/admin?method=toManagerPage" class="admin">后台管理</a> </div>-->
        <!--          -->
        <!--        </div>-->

      </div>
      <div class="header w">
        <a href="#" class="header-logo"></a>
        <div class="header-nav">
          <ul>
            <li><a href="javascript:getpageByType(1,'006001'); void(0);" onclick="getpageByType(1,'006001')">java</a></li>
            <li><a href="javascript:getpageByType(1,'006002'); void(0);" onclick="getpageByType(1,'006002')">前端</a></li>
            <li><a href="javascript:getpageByType(1,'001003'); void(0);" onclick="getpageByType(1,'001003')">小说</a></li>
            <li><a href="javascript:getpageByType(1,'001001'); void(0);" onclick="getpageByType(1,'001001')">文学</a></li>
            <li><a href="javascript:getpageByType(1,'001002'); void(0);" onclick="getpageByType(1,'001002')">青春文学</a></li>
            <li><a href="javascript:getpageByType(1,'004'); void(0);" onclick="getpageByType(1,'004')">艺术</a></li>
            <li><a href="javascript:getpageByType(1,'002001'); void(0);" onclick="getpageByType(1,'002001')">管理</a></li>
          </ul>
        </div>
        <div class="header-search">
          <input type="text" id="keyInput" placeholder="十万个为什么" value="" />
          <button class="iconfont icon-search" onclick="getpageByKey(1)"></button>
        </div>
      </div>
      <div class="banner w clearfix">
        <div class="banner-left">
          <ul>
            <li>
              <a href="javascript:getpageByType(1,'001'); void(0);">
                <span onclick="getpageByType(1,'001')">文学 鉴赏</span>
                <i class="iconfont icon-jiantou"></i
                ></a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'002'); void(0);">
                <span onclick="getpageByType(1,'002')">社科 研究</span>
                <i class="iconfont icon-jiantou"></i
                ></a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'003'); void(0);">
                <span onclick="getpageByType(1,'003')">少儿 培训</span>
                <i class="iconfont icon-jiantou"></i
                ></a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'004'); void(0);">
                <span onclick="getpageByType(1,'004')">艺术 赏析</span>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'005'); void(0);">
                <span onclick="getpageByType(1,'005')">生活 周边</span>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'006'); void(0);">
                <span onclick="getpageByType(1,'006')">文教 科技</span>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
            <li>
              <a href="javascript:getpageByType(1,'001003'); void(0);">
                <span onclick="getpageByType(1,'001003')">热销 畅读</span>
                <i class="iconfont icon-jiantou"></i>
              </a>
            </li>
          </ul>
        </div>
        <div class="banner-right">
          <div class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <img src="static/uploads/banner4.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="static/uploads/banner5.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="static/uploads/banner6.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
            </ul>
            <div class="swiper-button-prev"></div>

            <div class="swiper-button-next"></div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
      <div class="books-list ">
        <div class="w">
          <div class="list">
            <div class="list-header">
              <div class="title">图书列表</div>
              <div class="price-search">
                <span>价格:</span>
                <input type="text" value="" id="minPrice">
                <span>-元</span>
                <input type="text" value="" id="maxPrice">
                <span>元</span>
                <button onclick="getpageByPrice(1)">查询</button>
              </div>
            </div>

            <!--
                      <div class="list-content" th:if="${#lists.isEmpty(list)}">
                          图书列表为空，无法进行购买!!!
                        </div>
                        <div class="list-content" th:unless="${#lists.isEmpty(list)}">
                          <div class="list-item" th:each="book : ${list}">
                            <img src="static/uploads/huozhe.jpg" th:src="${book.imgPath}" alt="">
                            <p><span>书名:</span><span th:text="${book.bookName}">活着</span></p>
                            <p><span>作者:</span><span th:text="${book.author}">余华</span></p>
                            <p><span>价格:</span><span th:text="${book.price}">¥66.6</span></p>
                            <p><span>销量:</span><span th:text="${book.sales}">230</span></p>
                            <p><span>库存:</span><span th:text="${book.stock}">1000</span></p>
                            <button @click="addBookToCart()" th:value="${book.bookId}">加入购物⻋</button>
                          </div>
                        </div>
            -->

            <div class="list-content">
            </div>

            <div class="list-footer">
              <div id="pageNum">
              </div>
              共<strong id="totalPage"></strong>页&nbsp;
              <strong id="bookCount"></strong>条记录
              <span>到第</span><input  id="pageNoInput" value="" /><span>页</span>
              <button onclick="toPage()">确定</button>
            </div>
          </div>
        </div>

      </div>
      <div class="cate w">
        <div class="list">
          <a href="bookManager?method=page&typeId=006001" class="list-item" target="_blank">
            <i class="iconfont icon-java"></i>
            <span>java</span>
          </a>
          <a href="bookManager?method=page&typeId=006002" class="list-item" ><i class="iconfont icon-h5" ></i>h5</a>
          <a href="bookManager?method=page&typeId=006004" class="list-item" ><i class="iconfont icon-python" ></i>python</a>
          <a href="bookManager?method=page&typeId=006005" class="list-item" ><i class="iconfont icon-tianchongxing-"></i>pm</a>
          <a href="bookManager?method=page&typeId=006003" class="list-item" ><i class="iconfont icon-php_elephant" ></i>php</a>
          <a href="bookManager?method=page&typeId=006006" class="list-item" ><i class="iconfont icon-go"></i>go</a>
        </div>
        <a href="" class="img">
          <img src="static/uploads/cate4.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate5.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate6.jpg" alt="" />
        </a>
      </div>
      <div class="books">
        <div class="w">
          <div class="seckill">
            <div class="seckill-header">
              <div class="title">
                图书秒杀
              </div>
              <!-- <i class="iconfont icon-huanyipi"></i> -->
            </div>
            <div class="seckill-content">

              <a href="" class="tip">
                <h5>距离结束还有</h5>
                <i class="iconfont icon-shandian"></i>
                <div class="downcount">
                  <span class="time" id="hour">00</span>
                  <span class="token">:</span>
                  <span class="time" id="minute">00</span>
                  <span class="token">:</span>
                  <span class="time" id="second">00</span>
                </div>
              </a>


              <a href="" class="books-sec">
                <img src="static/uploads/congwanqingdaominguo.jpg" alt="">
                <p>从晚晴到民国</p>
                <div>
                  <span class="cur-price">￥28.9</span>
                  <span class="pre-price">￥36.5</span>
                </div>
                <button>立即购买</button>
              </a>
              <a href="" class="books-sec">
                <img src="static/uploads/cyuyanrumenjingdian.jpg" alt="">
                <p>c语言入门经典</p>
                <div>
                  <span class="cur-price">￥55.9</span>
                  <span class="pre-price">￥68.5</span>
                </div>
                <button>立即购买</button>
              </a>
              <a href="" class="books-sec">
                <img src="static/uploads/fusang.jpg" alt="">
                <p>扶桑</p>
                <div>
                  <span class="cur-price">￥30.9</span>
                  <span class="pre-price">￥47.5</span>
                </div>
                <button>立即购买</button>
              </a>
              <a href="" class="books-sec">
                <img src="static/uploads/geihaizideshi.jpg" alt="">
                <p>给孩子的诗</p>
                <div>
                  <span class="cur-price">￥18.9</span>
                  <span class="pre-price">￥25.5</span>
                </div>
                <button>立即购买</button>
              </a>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="w">
          <div class="top">
            <ul>
              <li>
                <a href="">
                  <img src="static/img/bottom1.png" alt="">
                  <span>大咖级讲师亲自授课</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom.png" alt="">
                  <span>课程为学员成长持续赋能</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom2.png" alt="">
                  <span>学员真是情况大公开</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="content">
            <dl>
              <dt>关于我们</dt>
              <dd>教育理念</dd>
              <!-- <dd>名师团队</dd>
              <dd>学员心声</dd> -->
            </dl>
            <dl>
              <dt>资源下载</dt>
              <dd>视频下载</dd>
              <!-- <dd>资料下载</dd>
              <dd>工具下载</dd> -->
            </dl>
            <dl>
              <dt>加入我们</dt>
              <dd>招聘岗位</dd>
              <!-- <dd>岗位介绍</dd>
              <dd>招贤纳师</dd> -->
            </dl>
            <dl>
              <dt>联系我们</dt>
              <dd>https://www.drimwai.com<dd>
            </dl>
          </div>
        </div>
        <div class="down">
          Drimwai's Bookstore.Copyright ©2021
        </div>
      </div>
    </div>
  </div>


    <script src="static/script/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    </script>

    <!-- vue代码 -->
    <script>
      var vue = new Vue({
        "el":"#app",
        "data":{
          "totalCount":0
        },
        "methods":{
          addBookToCart(){
            //获取bookId: bookId绑定在当前标签的value属性上
            // event.target就表示拿到当前标签
            var bookId = event.target.value;
            //发送异步请求:添加书进购物⻋
            axios({
              "method":"POST",
              "url":"protected/cart",
              "params":{
                "method":"addCartItem",
                "id":bookId
              }
            }).then(response => {
              if (response.data.flag){
                //添加购物⻋成功
                this.totalCount = response.data.resultData
                alert("添加购物⻋成功")
              } else {
                if (response.data.message == "unLogin") {
                  location.href = "user?method=toLoginPage"
                } else {
                  //说明显示购物⻋信息失败
                  alert("显示购物⻋信息失败")
                }
              }
            })
          },
          //获取购物⻋中的商品总数
          getTotalCount(){
            //发送异步请求给CartServlet,获取购物⻋中的商品总数
            axios({
              "method":"POST",
              "url":"protected/cart",
              "params":{
                "method":"getTotalCount"
              }
            }).then(response => {
              if (response.data.flag) {
                //将服务器端响应的商品总数赋值给前端的数据模型totalCount
                this.totalCount = response.data.resultData
              }else {
                //判断message是否是unLogin
                if(response.data.message != "unLogin"){
                  //获取失败
                  layer.msg("获取购物⻋商品总数失败")
                }
              }
            })
          }
        },
        created(){
          //获取购物⻋中的商品总数，并赋值给数据模型totalcount
          // 每次刷新都会走这个钩子函数
          // 发送异步请求，获取购物⻋的商品总数，并且将商品总数赋给this.totalCount
          window.addBookToCart=this.addBookToCart;
          axios({
            "method": "post",
            "url": "protected/cart",
            "params": {
              "method": "getTotalCount"
            }
          }).then(response =>{
            if(response.data.flag){
              this.totalCount = response.data.resultData
            }
          })

        }
      });

      function toPage() {
        var pageNo = $("#pageNoInput").val();
        load(pageNo);
      }
    </script>
    <!--    JQuery     -->
    <script>
      //  jquery 价格条件查询
      function getpageByPrice(currentPage) {
        //发送ajax请求
        var minPrice=$("#minPrice").val();
        var maxPrice= $("#maxPrice").val();
        $.get("http://localhost:8080/bookstore/bookManager", {
          pageNo: currentPage,
          min:minPrice,
          max:maxPrice,
          method: 'pageByPrice'
        }, function (pb) {
          //解析Pagebean数据，展示到页面上
          //分页工具条数据展示
          //1.1展示总页码
          $("#totalPage").html(pb.pageTotal);
          //$("#currentPage").html(pb.pageNo);
          $("#bookCount").html(pb.itemsCount);
          $("#pageNoInput").attr("value",pb.pageNo);
          $("#minPrice").attr("value",minPrice);
          $("#maxPrice").attr("value",maxPrice);
          var spans = "";
          //计算上一页的页码
          var beforeNum = pb.pageNo - 1;
          if (beforeNum <= 0) {
            beforeNum = 1;
          }
          //首页
          var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
          spans += first;
          //上一页
          var pre = '<span οnclick="javascript:getpageByPrice('+beforeNum+')"><a href="javascript:getpageByPrice('+beforeNum+'); void(0);">上一页</a></span>';
          spans += pre;
          //1.2展示分页页码
          /*
          一共展示10个页码，能够达到前5后4的效果
          如果前面不够5个，后面补齐总数到10个
          如果后面不足4个，前边补齐总数到10个
          */
          //定义开始位置 begin，结束位置 end
          var begin;
          var end;
          //要显示10个页码
          if (pb.pageTotal < 10) {
            //如果总页码都没有10页，就显示全部
            begin = 1;
            end = pb.pageTotal;
          } else {
            //总页码超过10页
            begin = pb.pageNo - 5;
            end = pb.pageNo + 4;
            //如果前边不够5个，后边补齐10个
            if (begin < 1) {
              begin = 1;
              end = begin + 9;
            }
            //如果后边不足4个，前面补齐10个
            if (end > pb.pageTotal) {
              end = pb.pageTotal;
              begin = end - 9;
            }
          }
          for (var i = begin; i <= end; i++) {
            var span;
            //判断当前页码是否等于i
            //创建不同格式的页码li
            if (pb.pageNo == i) {
              span = ' <a href="javascript:getpageByPrice('+i+'); void(0);" class="active" οnclick="getpageByPrice('+i+')" id="page '+i+' ">' + i + '</a>';
            } else {
              span = ' <a href="javascript:getpageByPrice('+i+'); void(0);" οnclick="getpageByPrice('+i+')" id="page '+i+' ">' + i + '</a>';
            }
            spans += span;
          }
          var nextPage = pb.pageNo + 1;
          if (nextPage > pb.pageTotal) {
            nextPage = pb.pageTotal;
          }
          var next = ' <span οnclick="javascript:getpageByPrice('+nextPage+')" ><a href="javascript:getpageByPrice('+nextPage+'); void(0);">下一页</a></span>';
          var last = ' <span οnclick="javascript:getpageByPrice('+pb.pageTotal+')"><a href="javascript:getpageByPrice('+pb.pageTotal+'); void(0);">  末页</a></span>';
          spans += next;
          spans += last;
          $("#pageNum").html(spans);
          //列表数据展示
          var book_ps = "";
          for (var i = 0; i < pb.pageItems.length; i++) {
            var book = pb.pageItems[i];
            var p ='<div class="list-item">' +
                    '<img src='+book.imgPath+' alt="" >\n'  +
                    '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                    '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                    '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                    '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                    '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                    '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                    '</div>'
            book_ps += p;
          }
          $(".list-content").html(book_ps);
        });
      };
      //  jquery 分类查询
      function getpageByType(currentPage,t_id) {
        //发送ajax请求
        $.get("http://localhost:8080/bookstore/bookManager", {
          pageNo: currentPage,
          typeId: t_id,
          method: 'pageByType'
        }, function (pb) {
          //解析Pagebean数据，展示到页面上
          //分页工具条数据展示
          //1.1展示总页码
          $("#totalPage").html(pb.pageTotal);
          $("#bookCount").html(pb.itemsCount);
          $("#pageNoInput").attr("value",pb.pageNo);
          var spans = "";
          //计算上一页的页码
          var beforeNum = pb.pageNo - 1;
          if (beforeNum <= 0) {
            beforeNum = 1;
          }
          //首页
          var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
          spans += first;
          //上一页
          var pre = '<span οnclick="javascript:getpageByType('+beforeNum+',\''+t_id+'\')"><a href="javascript:getpageByType('+beforeNum+',\''+t_id+'\'); void(0);">上一页</a></span>';
          spans += pre;
          //1.2展示分页页码
          /*
          一共展示10个页码，能够达到前5后4的效果
          如果前面不够5个，后面补齐总数到10个
          如果后面不足4个，前边补齐总数到10个
          */
          //定义开始位置 begin，结束位置 end
          var begin;
          var end;
          //要显示10个页码
          if (pb.pageTotal < 10) {
            //如果总页码都没有10页，就显示全部
            begin = 1;
            end = pb.pageTotal;
          } else {
            //总页码超过10页
            begin = pb.pageNo - 5;
            end = pb.pageNo + 4;
            //如果前边不够5个，后边补齐10个
            if (begin < 1) {
              begin = 1;
              end = begin + 9;
            }
            //如果后边不足4个，前面补齐10个
            if (end > pb.pageTotal) {
              end = pb.pageTotal;
              begin = end - 9;
            }
          }
          for (var i = begin; i <= end; i++) {
            var span;
            //判断当前页码是否等于i
            //创建不同格式的页码li
            if (pb.pageNo == i) {
              span = ' <a href="javascript:getpageByType('+i+',\''+t_id+'\'); void(0);" class="active" οnclick="getpageByType(\''+i+'\','+t_id+')" id="page'+i+' ">' + i + '</a>';
            } else {
              span = ' <a href="javascript:getpageByType('+i+',\''+t_id+'\'); void(0);" οnclick="getpageByType('+i+'\','+t_id+')" id="page'+i+'">' + i + '</a>';
            }
            spans += span;
          }
          var nextPage = pb.pageNo + 1;
          if (nextPage > pb.pageTotal) {
            nextPage = pb.pageTotal;
          }
          var next = ' <span οnclick="javascript:getpageByType('+nextPage+',\''+t_id+'\')" ><a href="javascript:getpageByType('+nextPage+',\''+t_id+'\'); void(0);">下一页</a></span>';
          var last = ' <span οnclick="javascript:getpageByType('+pb.pageTotal+',\''+t_id+'\')"><a href="javascript:getpageByType('+pb.pageTotal+',\''+t_id+'\'); void(0);">  末页</a></span>';
          spans += next;
          spans += last;
          $("#pageNum").html(spans);
          //列表数据展示
          var book_ps = "";
          for (var i = 0; i < pb.pageItems.length; i++) {
            var book = pb.pageItems[i];
            var p ='<div class="list-item">' +
                    '<img src='+book.imgPath+' alt="" >\n'  +
                    '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                    '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                    '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                    '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                    '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                    '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                    '</div>'
            book_ps += p;
          }
          $(".list-content").html(book_ps);
        });
      };
      // jquery 关键字搜索查询
      function getpageByKey(currentPage) {
        var keyVal=$("#keyInput").val();
        //发送ajax请求
        $.get("http://localhost:8080/bookstore/bookManager", {
          pageNo: currentPage,
          key: keyVal,
          method: 'pageByKey'
        }, function (pb) {
          //解析Pagebean数据，展示到页面上
          //分页工具条数据展示
          //1.1展示总页码
          $("#totalPage").html(pb.pageTotal);
          $("#bookCount").html(pb.itemsCount);
          $("#pageNoInput").attr("value",pb.pageNo);
          $("#keyInput").attr("value",keyVal);
          var spans = "";
          //计算上一页的页码
          var beforeNum = pb.pageNo - 1;
          if (beforeNum <= 0) {
            beforeNum = 1;
          }
          //首页
          var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
          spans += first;
          //上一页
          var pre = '<span οnclick="javascript:getpageByKey('+beforeNum+')"><a href="javascript:getpageByKey('+beforeNum+'); void(0);">上一页</a></span>';
          spans += pre;
          //1.2展示分页页码
          /*
          一共展示10个页码，能够达到前5后4的效果
          如果前面不够5个，后面补齐总数到10个
          如果后面不足4个，前边补齐总数到10个
          */
          //定义开始位置 begin，结束位置 end
          var begin;
          var end;
          //要显示10个页码
          if (pb.pageTotal < 10) {
            //如果总页码都没有10页，就显示全部
            begin = 1;
            end = pb.pageTotal;
          } else {
            //总页码超过10页
            begin = pb.pageNo - 5;
            end = pb.pageNo + 4;
            //如果前边不够5个，后边补齐10个
            if (begin < 1) {
              begin = 1;
              end = begin + 9;
            }
            //如果后边不足4个，前面补齐10个
            if (end > pb.pageTotal) {
              end = pb.pageTotal;
              begin = end - 9;
            }
          }
          for (var i = begin; i <= end; i++) {
            var span;
            //判断当前页码是否等于i
            //创建不同格式的页码li
            if (pb.pageNo == i) {
              span = ' <a href="javascript:getpageByKey('+i+'); void(0);" class="active" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
            } else {
              span = ' <a href="javascript:getpageByKey('+i+'); void(0);" οnclick="getpageByKey('+i+')" id="page'+i+'">' + i + '</a>';
            }
            spans += span;
          }
          var nextPage = pb.pageNo + 1;
          if (nextPage > pb.pageTotal) {
            nextPage = pb.pageTotal;
          }
          var next = ' <span οnclick="javascript:getpageByKey('+nextPage+')" ><a href="javascript:getpageByKey('+nextPage+'); void(0);">下一页</a></span>';
          var last = ' <span οnclick="javascript:getpageByKey('+pb.pageTotal+')"><a href="javascript:getpageByKey('+pb.pageTotal+'); void(0);">  末页</a></span>';
          spans += next;
          spans += last;
          $("#pageNum").html(spans);
          //列表数据展示
          var book_ps = "";
          for (var i = 0; i < pb.pageItems.length; i++) {
            var book = pb.pageItems[i];
            var p ='<div class="list-item">' +
                    '<img src='+book.imgPath+' alt="" >\n'  +
                    '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                    '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                    '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                    '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                    '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                    '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                    '</div>'
            book_ps += p;
          }
          $(".list-content").html(book_ps);

        });
        // var currentId="#page"+currentPage;
        // $("page1").style.color="#39987c";
      };
    </script>
    <script>
      // 1. 获取元素
      var hour = document.querySelector('#hour'); // 小时的黑色盒子
      var minute = document.querySelector('#minute'); // 分钟的黑色盒子
      var second = document.querySelector('#second'); // 秒数的黑色盒子
      var inputTime = +new Date('2021-12-31 22:00:00'); // 返回的是用户输入时间总的毫秒数
      countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
      // 2. 开启定时器
      setInterval(countDown, 1000);

      function countDown() {
        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; // 把剩余的小时给 小时盒子
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); // 当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
      }
    </script>
  </body>
</html>
